﻿@model List<ASPMVC_first_app.Models.Movie>
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@if (Model.Count == 0)
{
    <h3>There are no movies</h3>
}
<table id="movies" class="table table-bordered table-hover">
    <thead>
        <tr>
            <th><b>Name</b></th>
            <th><b>Genre</b></th>
            <th><b>Delete</b></th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
@using (Html.BeginForm("New", "Movies"))
{
    <input type="submit" class="btn btn-primary" value="New" />
}

@section scripts
{
    <script>
        $(document)
            .ready(function() {

                $("#movies")
                    .DataTable(
                    {
                        ajax: {
                            url: "/api/movie",
                            dataSrc: ""
                        },
                        columns: [
                            {
                                data: "Name",
                                render: function(data, type, movie) {
                                    return "<a href='movies/edit/" +
                                        movie.Id +
                                        "'>" +
                                        movie.Name
                                        "</a>";
                                }
                            },
                            {
                                data: "Genre.Name"
                            },
                            {
                                data: "Id",
                                render: function(data) {
                                    return "<button class = 'btn-link js-delete' data-movie-id=" +
                                        data +
                                        ">Delete</button>";
                                }
                            }
                        ]
                    });

                $("#movies")
                    .on("click",
                        ".js-delete",
                        function() {
                            var button = $(this);

                            bootbox.confirm("Do you realy want to delete movie?",
                                function(result) {
                                    if (result) {
                                        $.ajax({
                                            url: "/api/movie/" + button.attr("data-movie-id"),
                                            method: "DELETE",
                                            success: function() {
                                                button.parents("tr").remove();
                                            }
                                        });
                                    }
                                });


                        });
            });
    </script>
    @Scripts.Render("~/bundles/datatable")
}